const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>UPRM Emergency Network</title>
        <meta name="description" content="UPRM Emergency Network Powered by Project OWL">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                background-color: black;
                font: 14px "Avenir", helvetica, sans-serif;
                color: white;
                -webkit-font-smoothing: antialiased;
            }
            .logo {
                width: 100px;
                padding-top: 16px;
            }
            .logo-container {
                text-align: center;
            }
            .content {
                text-align: center;
                padding: 0 16px;
            }

            .body.on {
               display: block;
            }
            .body.off {
               display: none;
            }

            .body.sent {

            }

            .body.sent .c {
               background: #fff;
               color: #111;
               width: auto;
               max-width: 80%;
               margin: 0 auto;
               padding: 1em;
            }
            .body.sent .c h4 {
               margin: 0 0 1em;
               font-size: 1.5em;
            }
            .b {
               display: block;
               padding: 20px;
               text-align: center;
               cursor: pointer;
            }
            .b:hover {
               opacity: .7;
            }
            .lang, .details, .update, .home {
               display: block;
               color: #fff;
               border: 1px solid #fff;
               font-size: 1.25em;
               font-weight: 600;
               line-height: 1.5em;
               margin-bottom: 1em;
            }
            .details {
               background: #000000;
               border: 0;
            }
            .update {
               border: 0;
               background: #fe5454;
            }
            .sendReportBtn {
                box-shadow: 0px 1px 0px 0px #fff6af;
                background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
                background-color:#ffec64;
                border-radius:6px;
                border:1px solid #ffaa22;
                display:inline-block;
                cursor:pointer;
                color:#333333;
                font-family:Arial;
                font-size:15px;
                font-weight:bold;
                padding:6px 24px;
                text-decoration:none;
                text-shadow:0px 1px 0px #ffee66;
                text-align: center;
                width: 210px;
                margin-top: 24px;
            }
            .sendReportBtn:hover {
                background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
                background-color:#ffab23;
            }
            .sendReportBtn:active {
                position:relative;
                top:1px;
            }
            #form {
                background-color: #F5F5F5;
                color: #333333;
                width: 100%;
                max-width: 250px;
                margin: auto;
                padding: 32px;
                border-radius: 8px;
                text-align: left;
            }
            .textbox {
                padding: 4px;
                border-radius: 4px;
                border:solid 1px;
                /* color: rgb(184, 184, 184); */
            }
            .textbox-small {
                width: 20px;
            }
            .textbox-full {
                width: 100%;
            }
            .comments {
                width: 100%;
                height: 100px;
            }
            label  {
                font-weight: bold;
            }
            
        </style>
        </head>
    <body>


        <div class="logo-container">
            <img class="logo" src='' alt=''>

            <h2 class="">UPRM Emergency Network</h2>
        </div>

        <div class="content body" id="formContent">
            <p>You are connected to the UPRM Emergency Network. Please fill out the form to notify your status to first responders.</p>

            <div id="form">
                <form>
                    <label for="firstName">First Name</label><br>
                    <input class="textbox textbox-full" name="firstName" id="firstName" type="text" placeholder="Tarzán" /><br><br>
                    <label for="lastName">Last Name(s)</label><br>
                    <input class="textbox textbox-full" name="lastName" id="lastName" type="text" placeholder="Bulldog" /> <br /><br>


                    <label for="streetAddress">Street Address</label>
                    <input class="textbox textbox-full" name="streetAddress" id="streetAddress" type="text" placeholder="PR-108" /> <br /> <br />

                    <label for="city">City</label><br>
                    <input class="textbox textbox-full" name="city" type="text" placeholder="Mayagüez" /><br><br>
                    <label for="zipcode">Zipcode</label><br>
                    <input class="textbox textbox-full" name="zipcode" type="number" placeholder="00682" /> <br /> <br />

                    <label for="phone">Phone</label><br /> 
                    <input class="textbox textbox-full" name="phone" id="phoneNumber" type="text" placeholder="787-123-1234" />
                    <br /> <br /> 

                    <label for="status">Current Status</label><br /> 
                    <input name="status" id="currentStatusSos" type="radio" value="sos" /> I'm in immediate danger (SOS)
                    <br><input name="status" id="currentStatusOk" type="radio" value="ok" /> OK <br />  

                    <br /> 
                    <label for="status">Needs</label><br /> 
                    <input type="checkbox" name="water" id="waterNeed" type="radio" value="water" /> Water
                    <input name="tansportation" id="transportationNeed" type="checkbox" value="transportation" /> Transportation <br />  
                    <input type="checkbox" name="food" id="foodNeed" type="radio" value="food" /> Food
                    <input name="inspection" id="inspectionNeed" type="checkbox" value="inspection" /> Structural Inspection <br />  
                    <input type="checkbox" name="firstaid" id="firstAidNeed" type="radio" value="firstaid" /> First Aid
                    <input name="shelter" type="checkbox" id="shelterNeed" value="shelter" /> Shelter <br />  


                    <br />
                    <label for="status">How many people are with you?</label><br /> 
                    <span>Adults </span><input class="textbox textbox-small" name="adults" id="adultsInput" type="text" placeholder="2" />
                    <span>Children </span><input class="textbox textbox-small" name="children" id="childrenInput" type="text" placeholder="2" />
                    <span>Elderly </span><input class="textbox textbox-small" name="elderly" id="elderlyInput" type="text" placeholder="2" /><br><br>

                    <label for="status">Do you have any pets?</label><br /> 
                    <input class="textbox textbox-full" name="pets" id="petsInput" type="text" placeholder="1 gato y 1 perro" />

                    <br /> <br />
                    <label for="status">Additional Comments</label><br /> 
                    <textarea class="textbox comments" id="commentsInput" cols="30" rows="2"></textarea><br /> 

                    <a href="#" class="sendReportBtn" id="sendReport">SEND REPORT</a>
                </form>

                <p style="font-size: 10px; text-align: center;margin-top: 24px;">Powered by Project OWL and UPRM Students</p>
            </div>
        </div>


      <div id="bodySent" class="body off sent">
         <div class="c">
            <div class="gps"><h4>Message Sent</h4><h5 id="dateNow">March 13, 2019 @ 1:02 PM</h5><p>Your message ID#: 9XP002</p></div>
            <p class="disclaimer">If your situation changes, please send another update.
            <div id="bupdate" class="b update">Send Update</div>
         </div>
      </div>


      <script type="text/javascript">         
   
         var sendReport = document.getElementById('sendReport')
         var formContent = document.getElementById("formContent")
         var bodySent = document.getElementById("bodySent")
         var sendUpdate = document.getElementById("bupdate")

         sendUpdate.addEventListener("click",function(e){
            formContent.className += " on";
            formContent.classList.remove('off');
            bodySent.classList.remove("on")
            bodySent.className += " off"
         },false);

         sendReport.addEventListener("click",function(e){

            /////// set up current date
            // var d = new Date();
            // var da = "MONTH " + d.getDate() + ", " + d.getFullYear() + " @ " + d.getHours() + ":" + d.getMinutes();

            ///// grab data from form
            var firstNameInput = document.getElementById('firstName').value
            var lastNameInput = document.getElementById('lastName').value
            var phoneInput = document.getElementById('phoneNumber').value
            var locationInput = document.getElementById('streetAddress').value
            var currentStatusSos = document.getElementById('currentStatusSos').checked
            var currentStatusOk = document.getElementById('currentStatusOk').checked
            var waterNeed = document.getElementById('waterNeed').checked
            var transportationNeed = document.getElementById('transportationNeed').checked
            var foodNeed = document.getElementById('foodNeed').checked
            var inspectionNeed = document.getElementById('inspectionNeed').checked
            var firstAidNeed = document.getElementById('firstAidNeed').checked
            var shelterNeed = document.getElementById('shelterNeed').checked
            var childrenInput = document.getElementById('childrenInput').value
            var adultsInput = document.getElementById('adultsInput').value
            var elderlyInput = document.getElementById('elderlyInput').value
            var petsInput = document.getElementById('petsInput').value
            var messageInput = document.getElementById('commentsInput').value

            ///// if some elements are empty, fill them with NONE
            if (firstNameInput == "") {firstNameInput = "None"}
            if (phoneInput == "") {phoneInput = "1234567890"}
            if (locationInput == "") {locationInput = "None"}
            if (messageInput == "") {messageInput = "None"}
            if (childrenInput == "") {childrenInput = "0"}
            if (adultsInput == "") {adultsInput = "0"}
            if (elderlyInput == "") {elderlyInput = "0"}
            if (petsInput == "") {petsInput = "0"}

            var mid = "";
            var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            for (var i = 0; i < 12; i++) {
               mid += possible.charAt(Math.floor(Math.random() * possible.length));
            }

            ////// compile the URL we will send to the backend and then submit
            var submitUrl = "?mid=" + mid + "&fn=" + firstNameInput + "&ln=" + lastNameInput + "&location=" + locationInput + "&number=" + phoneInput + "&sok=" + currentStatusOk + "&ssos=" + currentStatusSos + "&wa=" + waterNeed + "&trans=" + transportationNeed + "&food=" + foodNeed + "&insp=" + inspectionNeed + "&aid=" + firstAidNeed + "&shelt=" + shelterNeed + "&adult=" + adultsInput + "&child=" + childrenInput + "&elderlyInput=" + elderlyInput + "&pets=" + petsInput + "&msg=" + messageInput

            console.log(submitUrl);

            var url = window.location.href;
            if (url.indexOf('?') > -1){
               url = url.split("?")[0]
               url += submitUrl
            }else{
               url += submitUrl
            }
            window.location.href = url;

            ////// show message sent confirmation
            bodySent.className += " on";
            bodySent.classList.remove('off');
            formContent.classList.remove("on")
            formContent.className += " off"

         },false);




      </script>


    </body>
</html>

)=====";
